<template>
  <div id="login">
    <el-form ref="form" :model="user" label-width="30%">
      <el-form-item>
        <h1 style="margin-left: 25%">登录</h1>
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="user.username" placeholder="请输入账号" style="width: 70%"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" type="password" placeholder="请输入密码" style="width: 70%"></el-input>
      </el-form-item>
      <el-form-item label="身份">
        <el-radio-group v-model="user.identity">
          <el-radio label="0" border size="medium">学生</el-radio>
          <el-radio label="1" border size="medium">教师</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="login" type="primary" style="margin-right: 41%">登录</el-button>
        <router-link to="/register" style="margin-right: 0"><el-button type="primary">注册</el-button></router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      user:{
        username:'',
        password:'',
        identity:'0'
      }
    }
  },
  methods:{
    login(){
      this.axios.post("/login",this.user).then((response)=>{
        if(response.data.code==100){
          this.$router.push("/")
        }
        console.log(response.data)
      })
    }
  }
}
</script>

<style>
#login{
  width: 700px;
  height: 400px;
  margin: 0 auto;
  margin-top: 10%;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  background: #fcfcfc;
}
</style>
